<template>
	<view class="bigbox">
		<image class="icon" src="../../static/27.png" mode=""></image>
		<view class="fot1">登录</view>
		<!-- 账号密码登录 -->
		<view v-if="type == 0">
			<view class="fot2">账号</view>
			<input class="iut1" v-model="username" placeholder-style="color:#CCCCCC;" type="text" value="" placeholder="请输入" />
			<view class="fot2">密码</view>
			<input class="iut1" v-model=" password" placeholder-style="color:#CCCCCC;" type="password" value="" placeholder="请输入" />
			<view class="text" @click="qh(1)">使用手机号码登录</view>
			<button style="margin-top: 60rpx;" class="all_btn" @click="login(1)">登录</button>
		</view>
		<!-- 手机验证码登录 -->
		<view v-if="type == 1">
			<view class="fot2">手机号码</view>
			<input class="iut1" v-model="phone" placeholder-style="color:#CCCCCC;" type="text" value="" placeholder="请输入" />
			<view class="fot2">验证码</view>
			<view class="box4">
				<input class="iut1" v-model="yzm" placeholder-style="color:#CCCCCC;" type="text" value="" placeholder="请输入" />
				<view @click="getCode()" class="yzm">{{count}}</view>
			</view>
			<view class="text" @click="qh(0)">使用账号密码登录</view>
			<button style="margin-top: 60rpx;" class="all_btn" @click="login(2)">登录</button>
		</view>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
	</view>
</template>

<script>
	import sliderVerify from '../../component/slider-verify/slider-verify.vue'
	export default {
		data() {
			return {
				type:0,
				count:'获取验证码',
				phone:'',
				username:'',
				password:'',
				yzm:'',
				sliderVerifyFLag: false,
				sta: ''
			}
		},
		components:{sliderVerify},
		onLoad:function(){
			console.log(uni.getStorageSync('login'),1111)
			if(uni.getStorageSync('login') != ''){
				uni.switchTab({
					url:'../renwu/renwu'
				})
			}
		},
		methods: {
			// 滑块验证结果回调函数
			verifyResult:function(res) {
				this.sliderVerifyFLag = false;
				if (res) {  //校验通过
					console.log(res)
					if(res && this.sta == 1){
						this.$get('sys/applogin',{
							username: this.username,
							password: this.password
						}).then((res)=>{
							console.log(res,111111)
							uni.showToast({
								title:res.data.message,
								icon:'none'
							})
							if(res.data.success == true){
								uni.setStorageSync('token', res.data.result.token);
								uni.setStorageSync('login', res.data.result.userInfo);
								setTimeout(()=>{
									uni.switchTab({
										url:'../renwu/renwu'
									})
								},1000)
								
							}
						})
					}else if(res && this.sta == 2){
						this.$get('sys/appphoneLogin',{
							phone: this.phone,
							smscode: this.yzm
						}).then((res)=>{
							uni.showToast({
								title:res.data.message,
								icon:'none'
							})
							if(res.data.success == true){
								uni.setStorageSync('token', res.data.result.token);
								uni.setStorageSync('login', res.data.result.userInfo);
								setTimeout(()=>{
									uni.switchTab({
										url:'../renwu/renwu'
									})
								},1000)
								
							}
						})
					}
					
				}else{
					// 校验失败,点击关闭按钮
				}
			},
			getCode:function(){
				const TIME_COUNT = 60;
				if(this.phone == ''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}else{
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.show = false;
						this.yzm_f()
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
								this.count = '重新获取'
							}
						}, 1000)
					}else{
						uni.showToast({
							title:'请勿重复操作',
							icon:'none'
						})
					}
				}
			},
			yzm_f:function(){
				this.$get('sys/appsms',{
					mobile: this.phone,
					smsmode: 2
				}).then((res)=>{
					console.log(res,111111)
				})
			},
			qh:function(e){
				this.type = e
				this.phone = ''
				this.username = ''
				this.password = ''
			},
			login:function(e){
				this.sta = e
				if(e == 1){//账号密码登录
					console.log(this.username,this.password)
					if(this.username == '' || this.password == ''){
						uni.showToast({
							title:'请输入账号密码',
							icon:'none'
						})
						return
					}else{
						this.sliderVerifyFLag = true
					}
				}else if(e == 2){//手机验证码登录
					if(this.phone == '' || this.yzm == ''){
						uni.showToast({
							title:'请输入手机号和验证码',
							icon:'none'
						})
						return
					}else{
						this.sliderVerifyFLag = true
					}
				}
			}
		}
	}
</script>

<style>
	.box4{
		position: relative;
	}
	.yzm{
		width: 180rpx;
		height: 50rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3a62ff;
		border: 1px solid #3a62ff;
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
	}
		
	.text {
		display: inline-block;
		margin-top: 40rpx;
		color: #3a62ff;
	}
	.iut1 {
		height: 60rpx;
		border-bottom: 1px solid #e5e5e5;
	}
	.fot2 {
		margin: 40rpx 0;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	.fot1 {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-top: 240rpx;
		margin-bottom: 110rpx;
	}
	.icon {
		width: 391rpx;
		height: 432rpx;
		position: fixed;
		top: -100rpx;
		right: -100rpx;
	}
	.bigbox {
		padding: 0 61rpx;
		box-sizing: border-box;
	}
</style>
